import React, { useMemo } from 'react';
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { ConfigProvider, MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import LogoSvg from './logo.svg';
import './index.less';
import { Redirect, useHistory, useLocation } from 'umi';
import zhCN from 'antd/locale/zh_CN';

const { Header, Content, Sider } = Layout;

const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));

const route = [
  { route: '/user/list', title: '用户列表', icon: UserOutlined },
  { route: '/juanshe', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/1', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/2', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/3', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/4', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/5', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/6', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/7', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/8', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/88', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/11', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/22', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/33', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/44', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/55', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/66', title: '圈舍列表', icon: LaptopOutlined },
  // { route: '/77', title: '圈舍列表', icon: LaptopOutlined },
];

const items2: MenuProps['items'] = route.map((routeItem, index) => {
  const key = routeItem.route;

  return {
    key,
    icon: React.createElement(routeItem.icon),
    label: routeItem.title,

    // children: new Array(4).fill(null).map((_, j) => {
    //   const subKey = index * 4 + j + 1;
    //   return {
    //     key: subKey,
    //     label: `option${subKey}`,
    //   };
    // }),
  };
});

const App: React.FC = (props) => {
  const history = useHistory();
  const location = useLocation();
  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    console.log(key);
    history.push(key);
  };

  if (location.pathname === '/') {
    return <Redirect to="/list1" />;
  }
  return (
    <ConfigProvider locale={zhCN}>
      <Layout className="my-layout-wrapper">
        <Header className="header">
          <img src={LogoSvg} alt="logo图片" />
          {/* <div className="logo">这里是LOGO</div> */}
          <div className="left-tool">这里是右边工具区</div>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
              items={items2}
              onClick={handleMenuClick}
              className="my-menu-wrapper"
            />
          </Sider>
          <Layout className="inner-layout">
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item> 
              </Breadcrumb> */}
            <Content className="inner-content">{props.children}</Content>
          </Layout>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default App;
